<template>
  <div class="fonts">
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>保险订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-input v-model="type._id" placeholder="订单号"></el-input>
    <!-- 投保人 -->
    <el-select v-model="type.clientId" clearable placeholder="投保人">
      <el-option
        v-for="item in OrderData.data"
        :key="item._id"
        :label="item.clientId.username"
        :value="item.clientId._id"
      ></el-option>
    </el-select>
    <!-- 选择状态 -->
    <el-select v-model="type.status" clearable placeholder="请选择">
      <el-option v-for="item in options" :key="item.value" :label="item" :value="item"></el-option>
    </el-select>
    <el-button class="search" type="success" @click="finde">查询</el-button>

    <!-- 卡片视图 -->
    <el-card>
      <!-- 用户列表区域 -->
      <el-table :data="OrderData.data" border stripe>
        <el-table-column width="180px" label="订单号" prop="_id" align="center"></el-table-column>
        <el-table-column label="购买保险" prop="insurancesId.name" align="center"></el-table-column>
        <el-table-column label="投保人" prop="clientId.username" align="center"></el-table-column>
        <el-table-column label="保险类型" prop="insurancesId.insuranceTypeId.name" align="center"></el-table-column>
        <el-table-column label="生效时间" prop="time" align="center"></el-table-column>
        <el-table-column label="生效状态" prop="status" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="300px">
          <template slot-scope="scope">
            <el-button size="mini" type="info" plain @click="look(scope.row._id)">查看订单</el-button>
            <el-button size="mini" @click="$router.push('/Updateorder/'+scope.row._id)">修改</el-button>
           <el-button size="mini" type="info" plain @click="$router.push('/Uploadimg/'+scope.row._id)">理赔</el-button>
            <el-button size="mini" type="danger" @click="dele(scope.row._id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <Page></Page>
    <!-- 查看订单详情 -->
    <el-dialog title="订单详情" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="客户名称" :label-width="formLabelWidth">
          <el-input v-model="clientName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="保险名称" :label-width="formLabelWidth">
          <el-input v-model="insurances" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="订单生效时间" :label-width="formLabelWidth">
          <el-input v-model="form.time" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="有效时间" :label-width="formLabelWidth">
          <el-input v-model="form.insurancesId.duration" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="订单状态" :label-width="formLabelWidth">
          <el-input v-model="form.status" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="销售员" :label-width="formLabelWidth">
          <el-input v-model="salesName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions, mapState, mapMutations } = createNamespacedHelpers("order");
import Page from "../page";
export default {
  data() {
    return {
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        insurancesId:''
      },
      formLabelWidth: "120px",
      clientName: "", //客户名称
      salesName: "", //销售名称
      insurances: "", //保险产品名称
      input: "",
      options: [
        "已退保",
        "未生效",
        "生效中",
        "待生效",
        "待支付",
        "保全受理中",
        "已取消",
        "已过期",
        "理赔中",
      ],
      type: {
        clientId: "",
        _id: "",
        status: "",
      },
    };
  },
  components: {
    //设置引入其他文件的html
    Page,
  },

  created() {
    this.getSalesOrder();
  },
  computed: {
    ...mapState(["OrderData", "pageSize", "currentPage"]),
  },
  watch: {
    currentPage() {
      this.getSalesOrder();
    },
    pageSize() {
      this.getSalesOrder();
    },

  },
  methods: {
    ...mapActions(["getSalesOrder", "deletOrder", "getOrder"]),
    ...mapMutations(["setCurrent", "setPageSize"]),
    

    dele(row) {
      // 删除提示框
      this.$confirm("此操作将永久删除该订单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "danger",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.deletOrder(row);
          this.getSalesOrder();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    async look(id) {
      this.dialogFormVisible = true;
      const aa = await this.getOrder(id);
      console.log('aa',aa);
      this.form = aa;
      console.log(aa);
      this.clientName = aa.clientId.username;
      this.salesName = aa.salesId.username;
      this.insurances = aa.insurancesId.name;
    },
    finde() {
      let type = "";
      let value = "";
      for (const key in this.type) {
        if (this.type[key] != "") {
          type = key;
          value = this.type[key];
          console.log("value", value);
        }
      }
      let val = { type, value };
      this.getSalesOrder(val);
    },
  },
};
</script>

<style scoped>
.el-input {
  width: 200px;
  display: inline-block;
  margin-left: 10px;
}
</style>

